<template>
    <div class="p6-container">
        <div class="chart-container" :style="{width:width}">
            <h2>Topical Distribution of Fundraiser’s Update Postings</h2>
            <div class="ope-area">
                <el-button
                        icon="upload"
                        class="reset"
                        @click="resetHandler()"
                        type="primary"
                        size="small"
                >All
                </el-button>
            </div>
            <div :class="className" :id="id" :style="{height:height,width:width}"></div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import {feature6Data} from "@/api/feature";
    import {mapState, mapMutations} from "vuex";

    export default {
        props: {
            className: {
                type: String,
                default: "chart"
            },
            id: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "200px"
            },
            height: {
                type: String,
                default: "200px"
            }
        },
        data() {
            return {
                chart: null,
                option: null
            };
        },
        computed: {
            ...mapState({
                currentCampainId: state => state.campaign.currentCampainId,
                currentCampainCategory: state => state.campaign.currentCampainCategory,
            }),
        },
        mounted() {
            this.initChart();
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods: {
            resetHandler() {
                this.chart.dispose();
                this.initChart();
            },
            async initChart() {
                var that = this;

                var featureData = await feature6Data();

                var lineData = featureData[this.currentCampainId]

                // var timeLine = lineData['Timeline']
                var timeLine = []
                var dataList = lineData['Data']
                var seriesDataList = []
                var seriesNameList = []

                var totalDays = lineData['Duration']

                for (let i = 1; i <= totalDays; i++) {
                    timeLine.push("Day " + i)
                }

                console.log("6666666")


                console.log(timeLine)

                for (var item in dataList) {
                    seriesNameList.push(item)
                    seriesDataList.push({
                        name: item,
                        type: "bar",
                        stack: "Additional Information",
                        data: dataList[item]
                    })
                }



                console.log(lineData)

                this.chart = echarts.init(document.getElementById(this.id));

                this.option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: seriesNameList
                    },
                    // toolbox: {
                    //   show: true,
                    //   orient: "vertical",
                    //   x: "right",
                    //   y: "center",
                    //   feature: {
                    //     mark: { show: true },
                    //     dataView: { show: true, readOnly: false },
                    //     magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
                    //     restore: { show: true },
                    //     saveAsImage: { show: true }
                    //   }
                    // },
                    calculable: true,
                    xAxis: [
                        {
                            type: "category",
                            name: "Timeline",
                            axisLabel: {
                                interval: 6,//代表显示所有x轴标签显示
                            },
                            axisTick: {
                                show: false
                            },
                            data: timeLine
                        }
                    ],
                    yAxis: [
                        {
                            name: "Update Length",
                            type: "value"
                        }
                    ],
                    series: seriesDataList
                };

                this.chart.setOption(this.option);

                this.chart.on("legendselectchanged", function (obj) {
                    var triggerAction = function (action, selected) {
                        legend = [];

                        for (name in selected) {
                            if (selected.hasOwnProperty(name)) {
                                legend.push({name: name});
                            }
                        }

                        that.chart.dispatchAction({
                            type: action,
                            batch: legend
                        });
                    };

                    var isFirstUnSelect = function (selected) {
                        var unSelectedCount = 0;
                        for (name in selected) {
                            if (!selected.hasOwnProperty(name)) {
                                continue;
                            }

                            if (selected[name] == false) {
                                ++unSelectedCount;
                            }
                        }
                        return unSelectedCount == 1;
                    };

                    var isAllUnSelected = function (selected) {
                        var selectedCount = 0;
                        for (name in selected) {
                            if (!selected.hasOwnProperty(name)) {
                                continue;
                            }

                            // 所有 selected Object 里面 true 代表 selected， false 代表 unselected
                            if (selected[name] == true) {
                                ++selectedCount;
                            }
                        }
                        return selectedCount == 0;
                    };

                    var selected = obj.selected;
                    var legend = obj.name;


                    // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
                    // 使得 无 selected 对象
                    if (selected != undefined) {
                        triggerAction("legendUnSelect", selected);
                        triggerAction("legendSelect", {[obj.name]: true});

                        /*if (isFirstUnSelect(selected)) {
                                          triggerAction('legendToggleSelect', selected);
                                      } else if (isAllUnSelected(selected)) {
                                          triggerAction('legendSelect', selected);

                                      }*/
                    }
                });
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .p6-container {
        width: 100%;
        h2 {
            text-align: center;
            margin-bottom: 26px;
        }

        .ope-area {
            display: flex;
            text-align: center;
            justify-content: center;

            .reset {
                margin-bottom: 16px;
            }
        }
    }
</style>
